<template>
  <div class="wrapper">
    <div class="form-container">
      <el-form
        label-position="right"
        :model="ruleForm"
        class="comp-form"
        label-width="150px"
        :inline="true"
        :rules="rules"
        ref="ruleForm"
        :disabled="disable"
      >
        <!-- <el-form-item label="开启capa时间" prop="open_capa_time">
                    <el-input v-model="ruleForm.open_capa_time"></el-input>
                </el-form-item> -->
        <div class="capa-card">
          <el-alert
            v-if="statusData.status === '2'"
            :title="statusData.opinion"
            type="error"
          >
          </el-alert>
          <div class="rule_title">
            <span class="title-l"> <i class="icon_left"></i>影响评估 </span>
          </div>
          <el-form-item label="CAPA号" prop="capa_no">
            <el-input disabled v-model="ruleForm.capa_no"></el-input>
          </el-form-item>
          <el-form-item label="开CAPA的日期" prop="create_time">
            <!-- <el-input v-model="ruleForm.create_time"></el-input> -->
            <el-date-picker
              disabled
              v-model="ruleForm.create_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="问题说明" prop="problem_explain">
            <el-input v-model="ruleForm.problem_explain"></el-input>
          </el-form-item>
          <el-row>
            <el-form-item label="影响等级" prop="impact_level">
              <el-radio-group v-model="ruleForm.impact_level">
                <el-radio label="1">严重</el-radio>
                <el-radio label="2">中等</el-radio>
                <el-radio label="3">轻微</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="发生的可能性" prop="occur_possible">
              <el-radio-group v-model="ruleForm.occur_possible">
                <el-radio label="1">很有可能发生</el-radio>
                <el-radio label="2">可能发生</el-radio>
                <el-radio label="3">基本不可能发生</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="影响后果" prop="impact_result">
              <el-radio-group v-model="ruleForm.impact_result">
                <el-radio label="1">影响重大</el-radio>
                <el-radio label="2">影响较大</el-radio>
                <el-radio label="3">影响较小</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <!-- <el-form-item label="影响评估" prop="impact_assessment">
                    <el-input v-model="ruleForm.impact_assessment"></el-input>
                </el-form-item> -->
          <div style="display: flex; align-items: end; margin-bottom: 18px">
            <el-image
              style="width: 500px; margin-left: 80px"
              src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/undefined/1685412353784%E5%9B%BE%E7%89%871.png"
            >
            </el-image>
            <el-form-item
              label="评分"
              prop="score"
              style="margin-bottom: 2px"
              label-width="60px"
            >
              <el-input style="width: 80px" v-model="ruleForm.score"></el-input>
            </el-form-item>
          </div>
          <el-row>
            <el-form-item label="责任地区负责人" prop="duty_area_leader_id">
              <!-- <el-input v-model="ruleForm.duty_area_leader_id"></el-input> -->
              <el-select
                v-model="ruleForm.duty_area_leader_id"
                filterable
                clearable
              >
                <el-option
                  v-for="handler in staffData"
                  :key="handler.id"
                  :label="handler.name"
                  :value="handler.id + ''"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="责任负责人地区" prop="duty_leader_area_id">
              <!-- <el-input v-model="ruleForm.duty_leader_area_id"></el-input> -->
              <el-cascader
                id="from_network"
                ref="cascader"
                :options="branchData"
                :show-all-levels="false"
                v-model="ruleForm.duty_leader_area_id"
                :props="{
                  emitPath: false,
                  checkStrictly: true,
                  label: 'branch_name',
                  value: 'id',
                  children: 'next_level_data',
                }"
                clearable
              >
              </el-cascader>
            </el-form-item>

            <el-form-item
              label="发给责任部门时间"
              prop="occur_duty_department_time"
              label-width="180px"
            >
              <el-date-picker
                v-model="ruleForm.occur_duty_department_time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="关闭CAPA时间" prop="close_capa_time">
              <el-date-picker
                v-model="ruleForm.close_capa_time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              label="质量控制负责人"
              prop="quality_control_leader_id"
            >
              <!-- <el-input v-model="ruleForm.quality_control_leader_id"></el-input> -->
              <el-select
                v-model="ruleForm.quality_control_leader_id"
                filterable
                clearable
              >
                <el-option
                  v-for="handler in staffData"
                  :key="handler.id"
                  :label="handler.name"
                  :value="handler.id + ''"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="质量控制负责人所属地区"
              prop="quality_control_area_id"
              label-width="180px"
            >
              <!-- <el-input v-model="ruleForm.quality_control_area_id"></el-input> -->
              <el-cascader
                ref="cascader"
                :options="branchData"
                :show-all-levels="false"
                v-model="ruleForm.quality_control_area_id"
                :props="{
                  emitPath: false,
                  checkStrictly: true,
                  label: 'branch_name',
                  value: 'id',
                  children: 'next_level_data',
                }"
                clearable
              >
              </el-cascader>
            </el-form-item>
          </el-row>
        </div>
        <div class="capa-card">
          <div class="rule_title">
            <span class="title-l"> <i class="icon_left"></i>设置复核人 </span>
          </div>
          <div style="margin-left: 30px">
            <el-table :data="ruleForm['check_leader']" class="leader_table">
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column prop="job" label="职务" width="180">
                <template slot-scope="scope">
                  <el-input
                    style="width: 160px"
                    v-model="scope.row['job']"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="user_id" label="主管领导" width="180">
                <template slot-scope="scope">
                  <el-select
                    style="width: 160px"
                    v-model="scope.row['user_id']"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="handler in staffData"
                      :key="handler.id"
                      :label="handler.name"
                      :value="handler.id + ''"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="job" label="审核状态" width="180">
                <template slot-scope="scope">
                  <el-select
                    style="width: 160px"
                    disabled
                    v-model="scope.row.status"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="(s, index) in ['待审核', '通过', '驳回']"
                      :key="index"
                      :label="s"
                      :value="index + ''"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="check_time" label="审核时间" width="180">
                <template slot-scope="scope">
                  <!-- <el-select disabled v-model="scope.row.check_time" filterable clearable>
                                        <el-option v-for="(s, index) in ['待审核', '通过', '驳回']" :key="index" :label="s"
                                            :value="index + ''" />
                                    </el-select> -->
                  <span
                    v-if="scope.row.check_time * 1"
                    v-time="scope.row.check_time"
                  ></span>
                  <el-date-picker
                    v-else
                    style="width: 160px"
                    disabled
                    v-model="scope.row.a"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="timestamp"
                  ></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="opinion" label="审核意见" width="180">
                <template slot-scope="scope">
                  <span v-if="scope.row['opinion']">
                    {{ scope.row["opinion"] }}</span
                  >
                  <el-input
                    v-else
                    disabled
                    style="width: 160px"
                    v-model="scope.row['opinion']"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="user_id" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    type="info"
                    @click="handleOperationAdd"
                    style="margin-left: 3px; height: 26px; padding: 0 6px"
                    size="mini"
                    plain
                    icon="el-icon-plus"
                    circle
                  ></el-button>
                  <el-button
                    type="info"
                    @click="handleOperationDel(scope)"
                    style="margin-left: 3px; height: 26px; padding: 0 6px"
                    size="mini"
                    plain
                    icon="el-icon-minus"
                    circle
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
    </div>
    <div class="operation-footer" v-if="mode !== 'detail'">
      <div class="footer-wrap">
        <el-button size="small" @click="handleClickClose">关闭</el-button>
        <el-button size="small" type="primary" @click="handleClickSubmit('0')"
          >保存草稿</el-button
        >
        <el-button size="small" type="primary" @click="handleClickSubmit('1')"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { CapaAssess, AdminListByCustomer } from "@/api/qms";
import { timestamp10 } from "@/utils/mUtils";
import { AdminBox } from "@/api/customer";
import { organizationBox } from "@/api/organization";

export default {
  name: "evaluate",
  components: {},
  props: ["detailData", "mode", "statusData"],
  data() {
    return {
      ruleForm: {
        problem_explain: "",
        open_capa_time: "",
        impact_level: "",
        occur_possible: "",
        impact_result: "",
        impact_assessment: "",
        duty_area_leader_id: "",
        duty_leader_area_id: "",
        occur_duty_department_time: "",
        close_capa_time: "",
        quality_control_leader_id: "",
        quality_control_area_id: "",
        is_initiated: "",
        check_leader: [
          {
            user_id: "",
            job: "主管领导",
          },
          {
            user_id: "",
            job: "区域领导",
          },
          {
            user_id: "",
            job: "质量部门",
          },
        ],
      },
      rules: {},
      staffData: [],
      branchData: [],
    };
  },
  mounted() {
    this.ruleForm.id = this.$route.query.id || "3";
    AdminBox({
      user_type: "0",
    }).then((res) => {
      this.staffData = res.data;
    });
    organizationBox({ not_show_first_branch: 1 }).then((res) => {
      this.branchData = res.data;
    });
  },
  computed: {
    disable() {
      return this.mode === "detail";
    },
  },
  watch: {
    detailData: {
      handler(newValue, oldValue) {
        if (this.detailData) {
          // console.log('11111111111111====================');
          this.getDetail();
        }
      },
      deep: true,
      immediate: true,
    },
    // statusData:{
    //     handler(newValue, oldValue) {
    //         // console.log('wwwwwwwwwwwwwww')
    //         this.statusData=newValue
    //     },
    //     deep: true,
    // }
  },
  methods: {
    getDetail() {
      const data = JSON.parse(JSON.stringify(this.detailData));
      data.create_time = data.create_time * 1000 || "";
      data.close_capa_time = data.close_capa_time * 1000 || "";
      data.drafting_time = data.drafting_time * 1000 || "";

      data.occur_duty_department_time =
        data.occur_duty_department_time * 1000 || "";
      data.duty_area_leader_id =
        data.duty_area_leader_id === "0" ? "" : data.duty_area_leader_id;
      data.quality_control_leader_id =
        data.quality_control_leader_id === "0"
          ? ""
          : data.quality_control_leader_id;
      // 责任负责人地区
      data.duty_leader_area_id =
        data.duty_leader_area_id === "0" ? "" : data.duty_leader_area_id * 1;
      data.quality_control_area_id =
        data.quality_control_area_id === "0"
          ? ""
          : data.quality_control_area_id * 1;

      data.check_leader =
        (data.check_leader || []).length === 0
          ? [
              {
                user_id: "",
                job: "主管领导",
              },
              {
                user_id: "",
                job: "区域领导",
              },
              {
                user_id: "",
                job: "质量部门",
              },
            ]
          : data.check_leader;
      this.ruleForm = data;
      // console.log(this.ruleForm, 'this.ruleform=====');
    },

    handleClickClose() {
      this.$router.go(-1);
    },
    handleOperationAdd() {
      this.ruleForm.check_leader.push({
        job: "",
        user_id: "",
      });
    },
    handleOperationDel(scope) {
      if (this.ruleForm.check_leader.length === 1) {
        this.$message({
          message: "至少保留一个！",
          type: "warning",
        });
        return;
      }
      const index = scope.$index;
      this.ruleForm.check_leader.splice(index, 1);
    },
    handleClickSubmit(is_initiated) {
      const _ruleForm = {
        ...this.ruleForm,
        occur_duty_department_time: timestamp10(
          this.ruleForm.occur_duty_department_time
        ),
        close_capa_time: timestamp10(this.ruleForm.close_capa_time),
        duty_leader_area_id: this.ruleForm.duty_leader_area_id + "",
        quality_control_area_id: this.ruleForm.quality_control_area_id + "",
        is_initiated: is_initiated,
      };
      if (
        is_initiated === "1" &&
        _ruleForm.check_leader.every((item) => item.user_id * 1 === 0)
      ) {
        this.$message({
          message: "请设置复核人",
          type: "success",
        });
        return;
      }
      CapaAssess(_ruleForm).then((res) => {
        if (res.code === 10000) {
          if (is_initiated === "0") {
            this.$message({
              message: "保存草稿成功",
              type: "success",
            });
            let text = this.$router.resolve({
              name: "capaEdit",
              query: {
                id: res.data.id,
                mode: "edit",
              },
            });
            location.replace(text.href);
          } else {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push({
                name: "capaList",
              });
            }, 200);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .rule_title {
    // background: red;
    display: flex;
    align-items: center;
    padding-bottom: 18px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: bold;
    justify-content: space-between;

    .title-l {
      display: flex;
      align-items: center;
    }

    .icon_left {
      display: inline-block;
      width: 6px;
      height: 16px;
      background: #f1a357;
      margin-right: 6px;
    }

    .icon-right {
    }
  }

  .range_tab {
    width: 100%;
    height: 30px;
    background: #f2f3f5;
    font-weight: bold;
    line-height: 30px;
    padding-left: 12px;
    margin-bottom: 16px;
    color: #6d6e72;
    font-size: 14px;
  }

  .comp-form {
    .el-input {
      width: 200px;
    }

    //   .el-radio-group
    .el-select,
    .el-cascader {
      width: 200px;
    }

    .el-textarea {
      width: 400px;
    }

    /deep/ .el-form-item {
      margin-right: 30px !important;
    }
  }
}

/deep/ .leader_table.el-table {
  height: 100% !important; //设置高优先，以覆盖内联样式

  &::before {
    height: 0px !important;
  }
}
</style>